<template>
  <div class="h-screen w-screen bg-gray-200 bg-opacity-30">
    <a-modal
      v-model:visible="showModal"
      :cancel-text="$t('waiting.cancel')"
      :content="$t('waiting.content')"
      :mask-closable="false"
      :ok-text="$t('waiting.ok')"
      :title="$t('waiting.title')"
      preset="dialog"
      @cancel="onNegativeClick"
      @ok="onPositiveClick"
    >
      是否启动新的容器?
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { deleteContainer, listContainerReq } from '@/api/docker'
import { useLoading } from '@/plugins/loading'
import { Route } from '@/router'
import { useUserStore } from '@/stores/auth'
import { useCourseSessionStore } from '@/stores/useCourseStore'
import { useDockers } from '@/stores/useDocker'
import { DLog } from '@/utils/log'
import { message } from 'ant-design-vue'
import { head } from 'lodash'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { onBeforeRouteLeave, useRouter } from 'vue-router'

onBeforeRouteLeave((_, __) => {
  unMountLoading()
})

const userStore = useUserStore()
const { t } = useI18n()
const showModal = ref<boolean>(false)
const router = useRouter()

const onNegativeClick = () => {
  router.replace({ name: Route.COMPETITION })
}

/**
 * loading 界面
 * @return 删除loading的节点函数
 */
const { destroy: unMountLoading, update: loadingUpdate } = useLoading({
  content: t('waiting.container')
})

const course = useCourseSessionStore()
const docker = useDockers()

//弹窗点击确认时操作
const onPositiveClick = async () => {
  try {
    await deleteContainer(docker.currentContainerName as string)
    await docker.createContainers()
  } catch (error: any) {
    router.replace({ name: Route.COMPETITION })
  }
}

const openstack_main = async () => {
  const document = course.document

  const backends = document?.extends?.PRIVATE.backends[0]
  const tags = backends?.tag ?? ''

  if (/windows/.test(tags)) {
    //说明是windows环境,直接连接即可
    router.push({ name: Route.CHAPTER })
    return
  }
  try {
    //docker 容器查看
    const containers = await listContainerReq({
      label: [`username=${userStore.user?.username}`]
    })

    docker.document = document
    docker.currentContainerName = `${userStore.user?.username}-${document?.id}`

    //没有容器的时候
    if (containers.length <= 0) {
      /**创建容器 */
      const imageState = await docker.listImages([docker.imageName])
      if (imageState.length === 0) {
        /**拉取镜像 */
        await docker.createImage(docker.imageName)
      }

      await docker.createContainers()
    } else {
      /**存在容器 */
      const _containerHead: any = head(containers)
      const _documentId = _containerHead.Labels.documentId

      if (_documentId === docker.document?.id) {
        router.push({ name: Route.CHAPTER })
      } else {
        showModal.value = true //弹窗确认对已存在容器的操作
      }
    }
  } catch (error: any) {
    console.log(error);
    
    DLog.Error(error)
    message.error('docker api连接出错,请联系管理员!')
    router.push({ name: Route.COMPETITION })
  }
}

openstack_main()
</script>
